<template>
<el-dialog :title="title"  :visible.sync="bankshow"
  @close="hidebank"
  append-to-body
  top="15vh"
  >
<el-button type="text" @click="bankaddshow=true "  class="add">新增</el-button>
 <el-dialog :title="'增加银行账户'"  :visible.sync="bankaddshow"
    @close="hidebankadd"
    append-to-body
    top="25vh"
 >
  <el-form ref="form2" label-width="120px" :model="bankaddinfo" label-position="left" :rules="addbankrule"  >
  <el-form-item label="账户名" prop="accountName"  >
     <el-input  v-model.trim="bankaddinfo.accountName"></el-input>
  </el-form-item>
  <el-form-item label="银行账户号码" prop="bankNumber">
  <el-input  v-model.trim.number="bankaddinfo.bankNumber"></el-input>
  </el-form-item>
    <el-form-item label="银行代码" prop="bankCode">
  <el-input  v-model.number="bankaddinfo.bankCode"></el-input>
  </el-form-item>
    <el-form-item label="银行名称" prop="bankName">
  <el-input  v-model.trim="bankaddinfo.bankName"></el-input>
  </el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :disabled="bankaddStatus"  @click="addBankAccount(bankaddinfo)" class="confirm">确 定</el-button>
</div>
</el-dialog>
<el-table
    :data="tableData"
    border
    height="200"
    style="width: 100%"
    cell-class-name="tac"
    >
    <el-table-column
      align="center"
      prop="accountName"
      label="账户名"
    >
    </el-table-column>
    <el-table-column
       align="center"
      prop="bankNumber"
      label="银行账户号码"
    >
    </el-table-column>
    <el-table-column
       align="center"
      prop="bankCode"
      label="银行代码">
    </el-table-column>

        <el-table-column
         align="center"
      prop="bankName"
      label="银行名称">
    </el-table-column>
     <el-table-column
      align="center"
      prop="status"
      label="状态">
      <template slot-scope="scope">
        <el-button type="primary" size="small" round  v-if="scope.row.status">开启</el-button>
        <el-button type="primary" size="small" round  v-else>停用</el-button>
      </template>
    </el-table-column>
    <el-table-column
     align="center"
      prop="status"
      label="操作">
    <template slot-scope="scope">
        <div class="open"  @click="changeCardStatus(scope.row,0)"  v-if="scope.row.status"></div>
        <div class="stop"   @click="changeCardStatus(scope.row,1)" v-else></div>
      </template>
    </el-table-column>
</el-table>

</el-dialog>
</template>

<script>
import { agentBankCardadd,agentBankCardStatus, agentBankCardlist } from "../../../Util/request";
export default {
    data() {
        return {
            bankshow:false,
            tableData: [],
            bankaddshow:false,
            bankaddinfo:{
              accountName:"",
              bankNumber:"",
              bankCode:"",
              bankName:"",
              mallId:""
            },
            bankaddStatus:true,
            addbankrule:{
                accountName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur' }
                ],
                bankNumber:[
                    { required: true, message: '请银行账户号码', trigger: 'blur' },

                ],
                bankCode:[
                    { required: true, message: '请银行代码', trigger: 'blur' },

                ],
                bankName:[
                    { required: true, message: '请银行名称', trigger: 'blur' },
                   
                ],
            },
        }

    },
    props:{
        showpop:Boolean,
        title:String,
        userinfo:Array,
        usermallId:Number  
    },
    methods: {
        hidebank(){
            this.$emit("close")
            console.log("关闭银行");
            console.log(this.usermallId);
        },
        hidebankadd(){
          this.bankaddshow=false
          this.bankaddinfo={
              accountName:"",
              bankNumber:"",
              bankCode:"",
              bankName:"",
              mallId:"",
          }
        },
        addBankAccount(e){
          console.log(e);
          agentBankCardadd((res)=>{
            // console.log(res);
            if(res.code==200){
               this.$message({
                message: '添加银行卡成功',
                type: 'success',
              });
              agentBankCardlist((res)=>{
              this.tableData= res.data.list
            
            },{mallId:this.usermallId})
              this.hidebankadd()
            }
          },e)
        },
        //修改用户银行卡状态
        changeCardStatus(e,status){
          agentBankCardStatus((res)=>{
              if(res.code==200){
                this.$message({
                  message:"修改成功",
                  type:"success"
                })
                this.tableData.forEach(el=>{
                  if(e.id==el.id){
                    el.status =status
                  }
                })
              }else{
                this.$message({
                  message:res.msg,
                  type:"error"
                })
              }
          },{
              id:e.id,
              status,
              mallId:this.usermallId
          })
        }
    },
    watch:{
        showpop(){
            this.bankshow = this.showpop;
        },
        userinfo:{
            deep:true,
            handler(n,o){
                this.tableData = n
            }
        },
        bankaddinfo:{
            deep:true,
            handler(n,o){
                this.bankaddinfo.mallId=this.usermallId
                for (let key in this.bankaddinfo) {
                    if(this.bankaddinfo[key]){
                        this.bankaddStatus = false
                    }else{
                        this.bankaddStatus = true
                        return
                    }
                }
            }
        },
    }
}
</script>

<style lang="less" scoped>
  
    .add{
        position: absolute;
        top: 20px;
        left: 26px;
    }
    /deep/.el-dialog{
  width: 85%;
}
.tac{
  .cell{
  
    .open{
      margin: 0 auto;
    width: 50px;
    height: 50px;
    background: no-repeat url(../../../assets/icons/按钮_开启.png);
    background-size: 100% 100%;
   
    }
  .stop{
     margin: 0 auto;
     width: 50px;
    height: 50px;
    background: no-repeat url(../../../assets/icons/按钮_关闭.png);
     background-size: 100% 100%;
    
  }
  
  }
}

</style>